<template>
  <a-spin :loading="loading" style="width: 100%">
    <a-card class="general-card" :title="$t('multiDAnalysis.card.title.dataOverview')">
      <a-row justify="space-between">
        <a-col v-for="(item, idx) in renderData" :key="idx" :span="6">
          <a-statistic :title="item.title" :value="item.value" show-group-separator :value-from="0" animation>
            <template #prefix>
              <span class="statistic-prefix" :style="{ background: item.prefix.background }">
                <component :is="item.prefix.icon" :style="{ color: item.prefix.iconColor }" />
              </span>
            </template>
          </a-statistic>
        </a-col>
      </a-row>
      <Chart style="height: 328px; margin-top: 20px" :option="chartOption" />
    </a-card>
  </a-spin>
</template>

<script lang="ts" setup>
import { queryDataOverview } from '@/api/visualization'
import useChartOption from '@/hooks/chart-option'
import useLoading from '@/hooks/loading'
import useThemes from '@/hooks/themes'
import { ToolTipFormatterParams } from '@/types/echarts'
import { LineSeriesOption } from 'echarts'
import { computed, ref } from 'vue'
import { useI18n } from 'vue-i18n'

const tooltipItemsHtmlString = (items: ToolTipFormatterParams[]) => {
  return items
    .map(
      (el) => `<div class="content-panel">
        <p>
          <span style="background-color: ${el.color}" class="tooltip-item-icon"></span><span>${el.seriesName}</span>
        </p>
        <span class="tooltip-value">${el.value?.toLocaleString()}</span>
      </div>`
    )
    .reverse()
    .join('')
}

const generateSeries = (name: string, lineColor: string, itemBorderColor: string, data: number[]): LineSeriesOption => {
  return {
    name,
    data,
    stack: 'Total',
    type: 'line',
    smooth: true,
    symbol: 'circle',
    symbolSize: 10,
    itemStyle: {
      color: lineColor,
    },
    emphasis: {
      focus: 'series',
      itemStyle: {
        color: lineColor,
        borderWidth: 2,
        borderColor: itemBorderColor,
      },
    },
    lineStyle: {
      width: 2,
      color: lineColor,
    },
    showSymbol: false,
    areaStyle: {
      opacity: 0.1,
      color: lineColor,
    },
  }
}
const { t } = useI18n()
const { loading, setLoading } = useLoading(true)
const { isDark } = useThemes()
const renderData = computed(() => [
  {
    title: t('multiDAnalysis.dataOverview.contentProduction'),
    value: 1902,
    prefix: {
      icon: 'icon-edit',
      background: isDark.value ? '#593E2F' : '#FFE4BA',
      iconColor: isDark.value ? '#F29A43' : '#F77234',
    },
  },
  {
    title: t('multiDAnalysis.dataOverview.contentClick'),
    value: 2445,
    prefix: {
      icon: 'icon-thumb-up',
      background: isDark.value ? '#3D5A62' : '#E8FFFB',
      iconColor: isDark.value ? '#6ED1CE' : '#33D1C9',
    },
  },
  {
    title: t('multiDAnalysis.dataOverview.contentExposure'),
    value: 3034,
    prefix: {
      icon: 'icon-heart',
      background: isDark.value ? '#354276' : '#E8F3FF',
      iconColor: isDark.value ? '#4A7FF7' : '#165DFF',
    },
  },
  {
    title: t('multiDAnalysis.dataOverview.activeUsers'),
    value: 1275,
    prefix: {
      icon: 'icon-user',
      background: isDark.value ? '#3F385E' : '#F5E8FF',
      iconColor: isDark.value ? '#8558D3' : '#722ED1',
    },
  },
])
const xAxis = ref<string[]>([])
const contentProductionData = ref<number[]>([])
const contentClickData = ref<number[]>([])
const contentExposureData = ref<number[]>([])
const activeUsersData = ref<number[]>([])
const { chartOption } = useChartOption((dark) => {
  return {
    grid: {
      left: '2.6%',
      right: '4',
      top: '40',
      bottom: '40',
    },
    xAxis: {
      type: 'category',
      offset: 2,
      data: xAxis.value,
      boundaryGap: false,
      axisLabel: {
        color: '#4E5969',
        formatter(value: number, idx: number) {
          if (idx === 0) return ''
          if (idx === xAxis.value.length - 1) return ''
          return `${value}`
        },
      },
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      splitLine: {
        show: false,
      },
      axisPointer: {
        show: true,
        lineStyle: {
          color: '#23ADFF',
          width: 2,
        },
      },
    },
    yAxis: {
      type: 'value',
      axisLine: {
        show: false,
      },
      axisLabel: {
        formatter(value: number, idx: number) {
          if (idx === 0) return String(value)
          return `${value / 1000}k`
        },
      },
      splitLine: {
        lineStyle: {
          color: dark ? '#2E2E30' : '#F2F3F5',
        },
      },
    },
    tooltip: {
      trigger: 'axis',
      formatter(params) {
        const [firstElement] = params as ToolTipFormatterParams[]
        return `<div>
            <p class="tooltip-title">${firstElement.axisValueLabel}</p>
            ${tooltipItemsHtmlString(params as ToolTipFormatterParams[])}
          </div>`
      },
      className: 'echarts-tooltip-diy',
    },
    graphic: {
      elements: [
        {
          type: 'text',
          left: '2.6%',
          bottom: '18',
          style: {
            text: '12.10',
            textAlign: 'center',
            fill: '#4E5969',
            fontSize: 12,
          },
        },
        {
          type: 'text',
          right: '0',
          bottom: '18',
          style: {
            text: '12.17',
            textAlign: 'center',
            fill: '#4E5969',
            fontSize: 12,
          },
        },
      ],
    },
    series: [
      generateSeries('内容生产量', '#722ED1', '#F5E8FF', contentProductionData.value),
      generateSeries('内容点击量', '#F77234', '#FFE4BA', contentClickData.value),
      generateSeries('内容曝光量', '#33D1C9', '#E8FFFB', contentExposureData.value),
      generateSeries('活跃用户数', '#3469FF', '#E8F3FF', activeUsersData.value),
    ],
  }
})
const fetchData = async () => {
  setLoading(true)
  try {
    const { data } = await queryDataOverview()
    xAxis.value = data.xAxis
    data.data.forEach((el) => {
      if (el.name === '内容生产量') {
        contentProductionData.value = el.value
      } else if (el.name === '内容点击量') {
        contentClickData.value = el.value
      } else if (el.name === '内容曝光量') {
        contentExposureData.value = el.value
      }
      activeUsersData.value = el.value
    })
  } catch (err) {
    // you can report use errorHandler or other
  } finally {
    setLoading(false)
  }
}
fetchData()
</script>

<style scoped lang="less">
:deep(.arco-statistic) {
  .arco-statistic-title {
    color: rgb(var(--gray-10));
    font-weight: bold;
  }
  .arco-statistic-value {
    display: flex;
    align-items: center;
  }
}
.statistic-prefix {
  display: inline-block;
  width: 32px;
  height: 32px;
  margin-right: 8px;
  color: var(--color-white);
  font-size: 16px;
  line-height: 32px;
  text-align: center;
  vertical-align: middle;
  border-radius: 6px;
}
</style>
